<template>
  <div>
    <h3>传统表单</h3>
    <form action="/login" method="get">
      <div>
        用户名：<input type="text" name="userName"/>
      </div>
      <div>
        密码：<input type="password" name="password"/>
      </div>
      <button type="submit">登录</button>
    </form>
    <h3>使用Vue后的表单</h3>
    <h4>单行文本</h4>
    <input type="text" v-model="form.userName"/>
    <h4>密码框</h4>
    <input type="password" v-model="form.password"/>
    <h4>单选框</h4>
    <input type="radio" v-model="form.sex" :value="1"/>男
    <input type="radio" v-model="form.sex" :value="2" />女
    <h4>多选框</h4>
    <input type="checkbox" v-model="form.fruits" :value="1"/>苹果
    <input type="checkbox" v-model="form.fruits" :value="2" />芒果
    <input type="checkbox" v-model="form.fruits" :value="3" />荔枝
    <h4>多行文本</h4>
    <textarea v-model="form.remark"></textarea>
    <h4>下拉选择</h4>
    <select v-model="form.city">
      <option :value="1001">南宁</option>
      <option :value="1002">柳州</option>
      <option :value="1003">桂林</option>
    </select>
    <h4>文件上传</h4>
    <input type="file" @change="handleFileChange($event)"/>
    <div>{{form}}</div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
       userName: '',
       password: '',
       sex: 1,
       fruits: [],
       remark: '',
       city: '1001'
      }
    }
  },
  methods: {
    handleFileChange(e) {
      console.log(e.target.files)
    }
  }
}
</script>

<style>

</style>